<template>
  <div class="tree-ctrl-body" >
    <div class="tree-table-ctrl">
     <!-- <div class="search-ctrl f-l" >
        <input type="text" class="search-text" placeholder="部门搜索">
        <button type="button" class="search-btn btn btn-info" >搜索</button>
      </div>-->
      <div id="tree-dep"  class="ztree"></div>
    </div>
    <div class="tree-table-ctrl">
      <!-- {{TreeNodes}} -->
      <TreeTable
        :treeTableRow="treeTableRow"
        :searchObj="searchObj"
        @tableSearch="tableSearch"
        @pageChange="tableRowChange"
        @newPoliceSucceedFnOrigin="newPoliceSucceedFnOriginFn"
        @policeDeleteCallBack="policeDeleteCallBackFn"
        @searchParamsParent="searchParamsParentFn"
      ></TreeTable>

    </div>
  </div>
</template>

<script>
    import TreeTable from "./policeTable.vue"
    export default {
        name: "tree",
      data(){
        return{
          setting : {
            data: {
              simpleData: {
                enable: true
              },
            },
          },
          treeTableRow:{},
          stationObj:{
            pageSize:20,
            policeName:"",
            policeCode:"",
            stationId:"",
            policeTypeId:"",
            status:"",
            pageNum:""
          },
          stationCommunication:{},
          searchObj:{
            condition:[
              {"title":"警员姓名","key":"policeName",'type':'text',"value":''},
              {"title":"警员编号","key":"policeCode",'type':'text',"value":''},
         /*     {"title":"所属单位","key":"stationId","value":'','type':'treeSection','data':''},*/
              {"title":"警员类型","key":"policeTypeId","value":'','type':'selectPoliceType','data':''},
              {"title":"警员状态","key":"status","value":'','type':'select','data':[
                  {"key":"请选择状态","value":""},
                  {"key":"启用","value":"1"},
                  {"key":"禁用","value":"0"},
                ]
              },
            ],
            htmlType:"searchDefaultPublic",
          },
          pageAjax:false
        }
      },
      components:{
        TreeTable
      },
      mounted(){

        //所属单位
       /* this.$axios.get(this.HOST+'/station/getOrgaInfo')
          .then((data)=>{
            this.searchObj.condition[2].data = data.data.data;
          })
          .catch((err)=>{
            //console.log(err);
          });*/

        //警员类型
        this.$axios.get(this.HOST+"/police/getAllPoliceType")
          .then((data)=>{
            //console.log(data);
            this.searchObj.condition[2].data = data.data;
          })
          .catch((err)=>{
            //console.log(err);
          });

        //添加回调
        ////console.log(this.$store.getters.getTreeUrl.treeUrl)
        const _this = this;
        this.setting.callback = {
          onClick:function(event,treeId,treeNode){
            //console.log(treeNode);

            _this.stationCommunication.id = treeNode.id;
            _this.stationCommunication.name = treeNode.name;
            sessionStorage.setItem("stationCommunication",JSON.stringify(_this.stationCommunication));
            //部门信息缓存
            //console.log(JSON.parse(sessionStorage.getItem("stationCommunication")));
            //树结构表格加载
            _this.stationObj.stationId = treeNode.id;
            //表格列表
            _this.treeTableAjax();
            //切换部门清除缓存
            //_this.clearSection();
          }
        };
        //初始化加载树结构
        let params = {};
        //表格列表
        this.treeAjax(this.HOST+'/station/getOrgaInfo','get',params);

      },
      methods:{
        //树结构加载
        treeAjax(url,type,params){
          this.$axios[type](url)
            .then((data)=>{
              $.fn.zTree.init($("#tree-dep"), this.setting, data.data.data);
              $(function(){
                $("#tree-dep > li").eq(0).children("a").click();
              });
            })
            .catch((err)=>{
              //console.log(err);
            })
        },
        // //删除刷新
        // newTreeTableRowFn(index){
        //   this.treeTableRow.data.splice(index,1);
        // },
        //树结构表格加载
        treeTableAjax(){
          //console.log(this.stationObj);
          this.$axios.get(this.HOST+"/police/getPoliceInfoDetail",{
            params:this.stationObj
          })
            .then((tableData)=>{
              //console.log(tableData.data);
              this.treeTableRow = tableData.data;
            })
            .catch((err)=>{
              ////console.log(err);
            })
        },

        //分页
        tableRowChange(page){
          this.stationObj.pageNum = page;
          //console.log(this.stationObj.pageNum);
          //表格列表重新渲染
          this.treeTableAjax();
        },

        //表格搜索
        tableSearch(tableSearchText){
          this.stationObj.policeName = tableSearchText;
          this.treeTableAjax();
        },

        //刷新表
        newPoliceSucceedFnOriginFn(){
          //this.treeTableRow = [];
          //console.log(this.stationObj);
          this.treeTableAjax();
        },

        //删除回调
        policeDeleteCallBackFn(index){
          //console.log(this.stationObj);
          //this.newPoliceSucceedFnOriginFn();
          //this.treeTableRow.data.splice(index,1);
          ////console.log(this.stationObj);
          ////console.log(this.stationObj);
          this.treeTableAjax();
        },

        //切换部门清除数据
        clearSection(){
          this.stationObj.policeName = "";
          this.stationObj.pageNum = "1";
        },

        //警员高级搜索
        searchParamsParentFn(){
          //console.log(this.searchObj);
          for( let i=0;i<this.searchObj.condition.length;i++ ){
            for( let paramsKey in this.stationObj ){
              if( this.searchObj.condition[i].key === paramsKey ){
                if( this.searchObj.condition[i].key === 'stationId' && this.searchObj.condition[i].value === "" ){
                  this.stationObj[paramsKey] = this.stationCommunication.id;
                }else{
                  this.stationObj[paramsKey] = this.searchObj.condition[i].value;
                }
              }
            }
          }
          this.treeTableAjax();
        }

      }
    }
</script>

<style scoped>

</style>
